<ion-header>
  <ion-buttons slot="start">
    <ion-back-button></ion-back-button>
  </ion-buttons>
  <ion-searchbar class="searchBox" placeholder="请输入城市拼音或汉字" (ionInput)="getItems($event)"></ion-searchbar>

  <div class="flexContainer current align_center">
    <div class="f1 city">
      目前所选定位：<span #containermap (tap)="citySelect(curPos)">{{curPos}}</span>
    </div>
    <div class="flex">
      <div class="row_end reset" (tap)="getPosition()">重新定位 </div>
      <div class="resetPos" (tap)="citySelect(resetPosition)">{{resetPosition}}</div>
    </div>
  </div>
</ion-header>

<ion-content>
  <!-- 
  <div id="indexs-bar" class="right_indexes">
    <div class="index-bar" *ngFor="let item of rightIndexes;let i = index" (touchstart)="IndexTouchStart($event)"
      id="item">{{item}}</div>
  </div> -->
  <ion-col style="width:20px;z-index:2;float: right;">
    <div style="position: fixed;">
      <p class="letter" *ngFor="let i of rightIndexes;" (click)="IndexTouchStart($event)">{{i}}</p>
    </div>
  </ion-col>

  <div class="citiesBox">
    <div class="left_city" #left_city>
      <div class="recent_title" *ngIf="cacheSearchCity">最近访问</div>
      <div class="recent" *ngIf="cacheSearchCity">
        <span *ngFor="let his of cacheSearchCity" tappable (click)="citySelect(his)">{{his.name}}</span>
      </div>

      <div class="recent_title">已入驻城市</div>
      <div #list>
        <ion-list>
          <!--搜索过滤的数组-->
          <ion-item-sliding *ngFor="let c of filteredCities">
            <ion-item tappable (click)="citySelect(c)">{{c.name}}</ion-item>
          </ion-item-sliding>

          <!--全部城市数组-->
          <ion-item-group lines='none' *ngFor="let item of cities" #cityGroup style="margin-right: 1rem;">
            <ion-label class="index_title">{{item.index}}</ion-label>
            <ion-row *ngFor="let colItem of item.cities">
              <ion-col size='4' *ngFor="let item of colItem" (click)='citySelect(item.pagename)' align="center">
                <div class="h4">
                  {{item.name}}
                </div>
              </ion-col>
            </ion-row>
          </ion-item-group>
        </ion-list>
      </div>
    </div>
  </div>

</ion-content>